<template>
  <div class="company-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="家政平台" />

    <van-sticky>
      <div class="searchs">
        <form action="/">
          <van-search
            class="search"
            v-model="searchText"
            placeholder="智能匹配"
            @search="onSearch"
            @click="showFilter = true"
          />
        </form>

        <!-- 智能匹配弹出频道 -->
        <van-popup v-model="showFilter" round position="bottom" :style="{ height: '85%' }">
          <filter-edit :filterName="'company'" @filter-success="companys = $event" @close="showFilter = false" />
        </van-popup>
        <!-- /智能匹配弹出频道 -->

        <van-row type="flex" justify="center" align="center" class="area" @click="showSelectArea = true">
          <span class="van-ellipsis">{{ area }}</span><van-icon name="arrow-down" />
        </van-row>
        <select-area :showSelectArea="showSelectArea" @confirm="confirmArea" @close="showSelectArea = false" />
      </div>
    </van-sticky>

    <toggle-tag :tag-list="Company.occupation" :tag-data="occupation" @pushTag="pushTag" @spliceTag="spliceTag">
      <template v-slot:after>
        <van-tag plain round size="large" :class="occupation.length >= Company.occupation.length ? 'active' : ''" @click="allOccupation">全部职业</van-tag>
      </template>
    </toggle-tag>

    <div class="company-info-wrap">
      <van-list v-model="loading" :finished="finished" finished-text="已显示全部公司" :error.sync="error" error-text="加载公司列表失败, 点击重新加载" @load="onLoad">
        <company-info v-for="item in companys" :key="item.id" :companys="item" />
      </van-list>
    </div>
  </div>
</template>

<script>
import Company from '@/api/constant/company'
import { getCompanys } from '@/api/company'

export default {
  name: 'Company',
  components: {},
  props: {},
  data () {
    return {
      Company,
      loading: false,
      finished: false,
      error: false,
      page: {
        _page: 1,
        _limit: 5
      },
      companys: [],
      occupation: [],
      showFilter: false, // 控制筛选弹出层的显示状态
      searchText: '',
      area: '地区',
      showSelectArea: false // 控制选择地区弹出层的显示状态
    }
  },
  computed: {},
  watch: {},
  created () {
    this.onLoad()
  },
  mounted () {},
  methods: {
    async onLoad () {
      try {
        this.loading = true
        const res = await getCompanys(this.page)
        this.companys.push(...res)
        this.loading = false
        // 判断是否还有数据 ? 有就更新获取下一页的数据页码 : 没有就将 finished 设置结束
        res.length ? this.page._page++ : this.finished = true
      } catch (error) {
        console.log(error)
        this.loading = false
        const data = JSON.parse(error)
        if (data.status === 200) {
          this.finished = true
          return
        }
        this.error = true
      }
    },
    confirmArea (value) {
      this.area = value[1].name
      this.showSelectArea = false
    },
    pushTag (item) {
      this.occupation.push(item.name)
    },
    spliceTag (index, value) {
      this.occupation.splice(index, value)
    },
    allOccupation () {
      this.occupation = this.occupation.length < this.Company.occupation.length ? this.Company.occupation.map(item => item.name) : []
    },
    onSearch (val) {
      console.log(val)
    }
  }
}
</script>

<style scoped lang="less">
.company-container {
  padding-bottom: 100px;
  .searchs {
    z-index: 999;
    display: flex;
    align-items: center;
    background-color: rgb(63, 81, 181);
    .search {
      width: 580px;
      height: 120px;
      padding-right: 0;
      background-color: rgb(63, 81, 181);
    }

    .van-search__content {
      border-radius: 10px;
      background-color: white;
    }

    .area {
      flex: 1;
      color: white;
      font-size: 24px;
      max-width: 170px;
      .van-ellipsis {
        max-width: 120px;
      }
      .van-icon {
        margin-left: 10px;
      }
    }
  }

  .active {
    color: #3296fa;
  }

  .company-info-wrap {
    margin-top: 20px;
  }
}
</style>
